<template>
    <div class="headerBar">

        <div class="backToMain">
            <nuxt-link to="/mainPage/main"><img src="../static/icon.png" class="logo"/>
            <div class="name">互盟HOMO后台</div></nuxt-link>
        </div>
        <div class="tools">
            <nuxt-link to="/mainPage/login" ><button class="sign" @click="handleClick">{{text}}</button></nuxt-link>
            <div class="welcome" id="welcome">{{welSentence}}</div>
            <!-- <a-button type="dashed" shape="circle" icon="search" class="searchButton"></a-button> -->
        </div>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'

export default {
    components:{
    },
    computed: {
        ...mapState({
        signIn: state => state.account.signIn,
        account: state => state.account.account
        })
    },
    data() {
        return{
            welSentence:"向着星辰与深渊",
            text: '登录'
        }
    },
    methods:{
        ...mapActions({
            signOut: 'account/signOut'
        }),
        handleClick(){
            if(this.text=='退出')
            {
                this.signOut()
            }
        }
    },
    mounted(){
    },
    watch: {
        signIn: {
            immediate: true,
            handler(newVal) {
                if(newVal) {
                    this.text = '退出'
                    this.welSentence = '您好，管理员'
                }
                else {
                    this.text = '登录'
                }
            }
        }
    }
}

</script>

<style lang="scss" scoped>
.searchButton{
    float:right;
    margin-top: 2%;
    margin-right:3%;
}
.logo{
    float: left;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    background-color: transparent;
}
.name{
    float: left;
    color: rgba(255, 255, 255, 100);
    font-size: 25px;
    text-align: left;
    font-family: SourceHanSansSC-bold;
    margin-left:11%;
    margin-top: 6%;
    margin-bottom: 1.25%;

}
.sign{
    float: right;
    height: 100%;
    width:7%;
    border: 0;
    border-radius: 0;
    background-color:rgba(10, 38, 66, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 20px;
    font-family: SourceHanSansSC-bold;
    margin-right:0;
    margin-top: 0;
}
.welcome{
    float:right;
    color: rgba(64, 21, 183,100);
    font-size: 20px;
    text-align: left;
    font-family: SourceHanSansSC-bold;
    margin-right:1%;
    margin-top: 2%;
    margin-bottom: 1.5%;
    width:13%;
}
.headerBar{
    background-color:rgba(10, 38, 66, 100);
    display: flex;
    position: fixed;
    z-index: 100;
    height: 10%;
    width: 100%;
    top:0;
    left: 0;
    margin: 0;
    box-shadow: 0px 2px 0px 0px rgba(230, 230, 230,100);
    font-family: Roboto;
    border-bottom: 1px solid rgba(255, 255, 255,100);
    .tools{
        display:inline-block;
        width: 80%;
        background-color:rgba(255, 255, 255,100);
    }
    .backToMain{
        display:inline-block;
        width:20%
    }
}

</style>
